<template>
    <div>
        <!-- <input type="button" value="click to get jsons" @click='getdatas'>
        <input type="button" value="click to get graph" @click='getgraph'>
        <div>获得数据</div> -->
        <div id="showtablemain" style="width: auto;height: 1000px;"></div>
    </div>
</template>
<script>
import axios from 'axios'
import echarts from 'echarts'
export default {
  name: 'GraphAll',
  data () {
    return {
      jsons: {},
      target: 'http://127.0.0.1:8001/visual/graph/some?limit='

    }
  },
  props: {
    limit: String,
    iffocus: Boolean
  },
  mounted () {
    this.getdatas()
  },
  methods: {
    getdatas () {
      var that = this
      axios.get(that.target + that.limit).then(function (ret) {
        that.jsons = ret.data
        that.getgraph()
      })
    },
    getgraph () {
      var that = this
      var myChart = echarts.init(document.getElementById('showtablemain'))
      var option = {
        legend: {
          data: ['人物', '家族', '城堡', '属性']
        },
        series: [{
          type: 'graph',
          layout: 'force',
          animation: false,
          label: {
            position: 'right',
            formatter: '{b}'
          },
          roam: true,
          focusNodeAdjacency: that.iffocus,
          draggable: true,
          data: that.jsons.nodes.map(function (node, idx) {
            node.id = idx
            return node
          }),
          categories: that.jsons.categories,
          force: {
            edgeLength: 5,
            repulsion: 20,
            gravity: 0.1
          },
          edges: that.jsons.links
        }]
      }

      myChart.setOption(option)
    }
  }
}
</script>
